<template>
  <page-header-wrapper :tabList="tabList" :tab-active-key="activeKey" :tab-change="handleTabChange">
    <template #content>申请编号：{{ applyNO }}</template>
    <info v-show="activeKey === 'info'" :applyNO.sync="applyNO" :proposerID="browserCacheEditID" />
    <div v-show="activeKey === 'report'">
      <report v-if="tabClick[1]" :proposerID="browserCacheEditID" />
    </div>
    <div v-show="activeKey === 'infoLog'">
      <infoLog v-if="tabClick[2]" :proposerID="browserCacheEditID" />
    </div>
    <div v-show="activeKey === 'houseLog'">
      <houseLog v-if="tabClick[3]" :proposerID="browserCacheEditID" />
    </div>
  </page-header-wrapper>
</template>

<script>
import houseLog from './components/houseLog'
import infoLog from './components/infoLog'
import info from './components/info'
import report from './components/report'
export default {
  name: 'cityComplexInquireList',
  // name: 'primaryAuditManagementDetail',
  // name: 'cityComplexInquireList',
  components: {
    houseLog,
    infoLog,
    info,
    report,
  },
  data() {
    return {
      tabList: [
        { key: 'info', tab: '保障用户基本信息' },
        { key: 'report', tab: '调查报告与机构意见' },
        { key: 'infoLog', tab: '信息变更记录' },
        { key: 'houseLog', tab: '房屋分配记录' },
      ],
      browserCacheEditID: JSON.parse(localStorage.getItem('browserCacheDetail')).id || this.$route.params.id,
      activeKey: 'info',
      applyNO: '',
      // 是否加载
      tabClick: [true, false, false, false],
    }
  },
  mounted() {
    console.log('111')
  },
  methods: {
    handleTabChange(key) {
      this.activeKey = key
      const index = this.tabList.findIndex((e) => e.key === key)
      this.tabClick[index] = true
    },
  },
}
</script>
<style lang="less" scoped></style>
